<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0517</title>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <title>Title</title>
    </head>
</head>
<body>
<span id="sp">123</span>
<br>
<button type="button" id="hide1">隐藏</button>
<button type="button" id="show1">显示</button>
<br>
<button type="btoon" id="hide2">隐藏</button>
<button type="btoon" id="show2">显示</button>
<br>
<button type="button" id="delete">删除</button>
<br>
姓名：
<input type="text" name="username" id="username" value="张三">
<p>锄禾日当午，</p>
<p>汗滴禾下土。</p>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦。</p>
<script type="text/javascript">

    $(function () {
        alert("这是jquery的hellod");
        //单击隐藏所有的p标签
       // $("hide1").hide();
        //当鼠标单击button的时候单击  触发这个方法
        $("#show1").click(function () {
            //显示所有的p标签
            $("p").show();
        });
            //当鼠标单击button的时候单击  触发这个方法
        $("#hide1").click(function () {
            //隐藏所有的p标签
            $("p").hide();
        });
      $("[name = 'username']").change(function () {
          alert("内容发生改变")

      });
        alert($("[name='username'].var"));
        alert($("p").text());
        //显示1
        $("#show2").click(function () {
            //淡入慢慢的显示出来
            $("p").fadeIn("slow");

        });
        //隐藏1
        $("#hide2").click(function () {
            //淡出   慢慢的隐藏
            $("p").fadeOut("slow")
        });
        //删除按钮  点击删除按钮删除span元素
        $("#delete").click(function () {
            $("#sp").remove();
        });


    });

</script>
</body>
</html>